<template>
  <div class="app-container">
    <goBack></goBack>
    <el-card class="box-card project-container">
      <div slot="header" class="clearfix">
        <h3 class="title">{{DataDetails.name}}</h3>
      </div>
      <div class v-model="DataDetails">
        <el-row>
          <el-col :span="12">
            <span>服务客户：</span>
            <span>{{DataDetails.customerName}}</span>
          </el-col>
          <el-col :span="12">
            <span>联系方式：</span>
            <span>{{DataDetails.customerContact}}</span>
          </el-col>
        </el-row>
        <el-row v-if="isProject">
          <el-col :span="12">
            <span>项目类型：</span>
            <span v-if="DataDetails.projectType ===1">系统维护</span>
            <span v-else-if="DataDetails.projectType === 2">保温箱验证</span>
            <span v-else-if="DataDetails.projectType === 3">冷藏车验证</span>
            <span v-else-if="DataDetails.projectType === 4">冷库验证</span>
            <span v-else="DataDetails.projectType === 5">冰柜验证</span>
          </el-col>
          <el-col :span="12">
            <span>实施工程师：</span>
            <span>{{DataDetails.engineerName}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <span>实施计划时间：</span>
            <span>{{DataDetails.planStartDate | parseTime('{y}年{m}月{d}日 {h}:{i}')}}</span>
          </el-col>
          <el-col :span="12">
            <span>完成时限：</span>
            <span>{{DataDetails.planEndDate | parseTime('{y}年{m}月{d}日 {h}:{i}')}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span>服务地址：</span>
            <span>{{DataDetails.customerAddr}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span style="float:left; width:70px">项目描述：</span>
            <span style="float:left; width:868px;">{{DataDetails.description}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span>项目图片：</span>
            <span v-for="item in DataDetails.picList">
              <img :src="item.url" v-preview="item.url" preview-nav-enable="true" preview-title-enable="true">
            </span>
          </el-col>
        </el-row>
        <el-row v-if="isProject">
          <el-col :span="24">
            <span>任务状态：</span>
            <el-radio-group v-model="DataDetails.projectStatus" @change="updateProject" :disabled="isDisabled">
              <el-radio label="0">已完成</el-radio>
              <el-radio label="1">进行中</el-radio>
              <el-radio label="2">暂停</el-radio>
              <el-radio label="3">中止</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row v-if="!isProject">
          <el-col :span="24">
            <span>任务状态：</span>
            <el-radio-group v-model="DataDetails.state" @change="updateProject" :disabled="isDisabled">
              <el-radio label="0">已完成</el-radio>
              <el-radio label="1">进行中</el-radio>
              <el-radio label="2">暂停</el-radio>
              <el-radio label="3">中止</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span>项目跟踪留言：</span>
            <el-form :model="Form" ref="dataForm">
              <el-form-item prop="content">
                <el-input type="textarea" :rows="5" placeholder="说点什么" v-model="Form.content"></el-input>
              </el-form-item>
              <el-form-item>
                <span style="float:left">
                  <UploadImg ref="messagePic" :fileData="Form.picData" :imageUrl="imageUrl" :isMultiple="false" :isAutoUpload="false" :FileUrl="FileUrl" :Data="Data" :handleChange="handleChange" :handleProgress="handleProgress"></UploadImg>
                </span>
                <span style="margin-top:120px; float:right">
                  <el-button type="primary" @click="submitForm" :disabled="isEmpty">发布</el-button>
                </span>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <!-- 留言list -->
      <MessageList :commentList="commentList"></MessageList>
      <!--翻页-->
      <Pagination v-show="total > 10" :total="total" :pageSize="size" :handleCurrentChange="handleCurrentChange"/>
    </el-card>
  </div>
</template>
<script>
import checkPermission from "@/utils/permission"; // 权限判断函数
import goBack from "@/components/GoBack";
import { getTaskCategoryList } from "@/api/taskCategory";
import Pagination from "@/views/layout/components/Pagination";
import { getTaskData, updateTask } from "@/api/task";
import { getProjectData, updateProject } from "@/api/project";
import { getTaskCommentList, createTaskComment } from "@/api/taskComment";
import {  getProjectCommentList,  createProjectComment} from "@/api/projectComment";
import UploadImg from "@/components/Upload/UploadImg";
import MessageList from "@/components/MessageList";
export default {
  components: {goBack, UploadImg, MessageList, Pagination },
  props: {
    isProject: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      DataDetails: {},
      id: this.$route.params.id,
      listLoading: false,
      isDisabled:false,
      FileUrl: "",
      imageUrl: "",
      Data: {},
      total: 0,
      page: 1,
      size: 10,
      Form: {
        content: "",
        file: {}
      },
      isEmpty: true,
      commentList: []
    };
  },

  watch: {
    Form: {
      handler(newval, oldval) {
        this.Form.file = newval.file;
        this.Form.content !== "" || this.Form.file.hasOwnProperty("name")  ? this.isEmpty = false:this.isEmpty = true;
      },
      deep: true,
      immediate: true
    }
  },

  created() {
    this.getData();
    this.getList();
  },

  methods: {
    // 翻页
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    //更新状态
    updateProject() {
      let newData = {};
      Object.assign(newData, this.DataDetails);
      newData.state = parseInt(this.DataDetails.state);
      newData.projectStatus = parseInt(this.DataDetails.projectStatus);
      if (this.isProject) {
        updateProject(newData).then(res => {
          this.$message({
            message: "已成功修改项目状态",
            type: "success"
          });
          this.getData();
        });
        
      } else {
        updateTask(newData).then(res => {
          this.$message({
            message: "已成功修改项目状态",
            type: "success"
          });
          this.getData();
        });
      }
    },

    //图片上传检查
    handleChange(file, fileList) {
      const isImage =
        file.raw.type == "image/png" ||
        file.raw.type == "image/jpg" ||
        file.raw.type == "image/jpeg";
      if (!isImage) {
        this.$message.error("上传图片只能是JPG或者png格式!");
      }
      if (isImage) {
        this.Form.file = file;
        this.imageUrl = file.url;
      } else {
        fileList.pop();
      }
      return isImage
    },
    // 图片上传成功后
    handleProgress(event, file, fileList) {
      if (event.percent == 100) {
        this.$refs["dataForm"].resetFields();
        file.url = "";
      }
    },
    // 获取项目信息
    getData() {
      if (checkPermission(["engineer"])) {
        this.isDisabled = true;
      };
      if (this.isProject) {
        getProjectData({ projectId: this.id }).then(res => {
          this.DataDetails = res.data;
          this.DataDetails.projectStatus = res.data.projectStatus.toString();
        });
      } else {
        getTaskData({ taskId: this.id }).then(res => {
          console.log(res)
          this.DataDetails = res.data;
          this.DataDetails.state = res.data.state.toString();
        });
      }
    },
    // 获取项目评论列表
    getList() {
      this.listLoading = true;
      if (this.isProject) {
        let listQuery = {
          page: this.page,
          size: this.size,
          projectId: this.$route.params.id
        };
        getProjectCommentList(listQuery).then(res => {
          this.commentList = res.data.records;
          this.total = res.data.total;
        });
      } else {
        let listQuery = {
          page: this.page,
          size: this.size,
          taskId: this.$route.params.id
        };
        getTaskCommentList(listQuery).then(res => {
          this.commentList = res.data.records;
          this.total = res.data.total;
        });
      }
      this.listLoading = false;
    },

    //comment提交
    submitForm() {
      this.$refs["dataForm"].validate(valid => {
        if (this.isProject) {
          this.FileUrl = "http://gsp.coldcloud.com/projectComment/pic/insert";
          let tempData = { projectId: this.id };
          Object.assign(tempData, this.Form);
          createProjectComment(tempData).then(res => {
            this.Data = { commentId: res.data.insertId };
            if (JSON.stringify(this.Form.file) !== "{}") {
              this.$nextTick(() => {
                this.$refs.messagePic.UploadSubmit();
              });
            }
            this.$notify({
              title: "评论",
              message: "评论发布成功",
              type: "success",
              duration: 2000
            });
            // this.$refs['dataForm'].clearValidate();
            // this.$refs.messagePic.clearFiles();
            this.getList();
            this.isEmpty = true
          });
        } else {
          this.FileUrl = "http://gsp.coldcloud.com/taskComment/pic/insert";
          let tempData = { tid: this.id };
          Object.assign(tempData, this.Form);
          createTaskComment(tempData).then(res => {
            this.Data = { commentId: res.data.insertId };
            if (JSON.stringify(this.Form.file) !== "{}") {
              this.$nextTick(() => {
                this.$refs.messagePic.UploadSubmit();
              });
            }
            this.$notify({
              title: "评论",
              message: "评论发布成功",
              type: "success",
              duration: 2000
            });
            // this.$refs['dataForm'].clearValidate();
            // this.$refs.messagePic.clearFiles();
            this.getList();
            this.isEmpty = true
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.project-container {
  width: 980px;
  margin: 0 auto;
  .title {
    font-size: 18px;
    line-height: 60px;
    font-weight: 700;
    text-align: center;
  }
  span {
    vertical-align: top;
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 25px;
    display: inline-block;
  }
  span img {
    margin: 0 10px;
  }
}
</style>


